<template>
  <div>
    <div class="smsbox">
      <el-form
        :rules="SmsRules"
        :model="SmsForm"
        ref="SmsForm"
        id="smsform"
        status-icon
        style="width: 350px"
      >
        <el-form-item
          label=""
          prop="phone"
          v-if="SmsState.phoneState"
          :error="SmsForm.phoneErrormsg"
        >
          <div class="uInfo-input-right">
            <input
              type="button"
              id="getValiCode"
              value="获取验证码"
              class="uInfo-get-code uInfo-verificationDialogCodeBtn"
              @click="Bgetsmscode()"
            />
          </div>
          <el-input
            type="text"
            v-model="SmsForm.phone"
            autocomplete="off"
            placeholder="电话号码"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label=""
          prop="smscode"
          v-if="SmsState.smscodeState"
          :error="SmsForm.smscodeErrormsg"
        >
          <div class="uInfo-input-right">
            <input
              type="button"
              value="确认"
              class="uInfo-get-code uInfo-verificationDialogCodeBtn"
              v-if="!SmsState.timeoutState"
              @click="sendsms()"
              style="margin-right: 20px"
            />
            <span v-if="SmsState.timeState">{{ SmsForm.second }}s</span>
            <input
              type="button"
              id="getValiCode"
              value="重新发送"
              class="uInfo-get-code uInfo-verificationDialogCodeBtn"
              v-if="SmsState.timeoutState"
              @click="Agetsmscode()"
            />
          </div>
          <el-input v-model="SmsForm.smscode" placeholder="请输入验证码">
          </el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { validatePhone, validateSmscode } from "../plugins/validator";
export default {
  props: ["sign"],
  data() {
    return {
      signal: "",
      SmsForm: {
        phone: "",
        smscode: "",
        second: 60,
        sendTime: "",
        trimer: "",
        phoneErrormsg: "",
        smscodeErrormsg: "",
      },
      SmsState: {
        phoneState: true,
        smscodeState: false,
        timeState: true,
        timeoutState: false,
        idefiniTime: "",
      },
      SmsRules: {
        phone: [{ require: true, validator: validatePhone, triiger: "blur" }],
        smscode: [
          { require: true, validator: validateSmscode, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    Bgetsmscode() {
      this.$refs.SmsForm.validate(async (valid) => {
        if (!valid) return false;
        else {
          this.getsmscode()
            .then((e) => {
              this.$message({
                type: "success",
                message: `您的短信验证码为${e.smscode}`,
              });
              this.SmsState.phoneState = false;
              this.SmsState.smscodeState = true;
              this.SmsForm.trimer = setInterval(this.TimeTrimer, 1000);
            })
            .catch(() => {});
        }
      });
    },
    Agetsmscode() {
      this.getsmscode()
        .then((e) => {
          this.$message({
            type: "success",
            message: `您的短信验证码为${e.smscode}`,
          });
          this.SmsState.timeState = true;
          this.SmsState.timeoutState = false;
          this.SmsForm.trimer = setInterval(this.TimeTrimer, 1000);
        })
        .catch(() => {});
    },
    TimeTrimer() {
      this.SmsForm.second--;
      if (this.SmsForm.second == 0) {
        this.SmsState.timeState = false;
        this.SmsState.timeoutState = true;
        clearInterval(this.SmsForm.trimer);
        this.SmsForm.second = 60;
      }
    },
    getsmscode() {
      return new Promise((resolve, reject) => {
        let userPhone = {
          phone: this.SmsForm.phone,
          sendtime: Date.now(),
        };
        this.axios
          .post("/user/IdentifyForgetPhone", userPhone)
          .then((res) => {
            if (res.data.data.code == 200) {
              resolve(res.data.data);
            } else {
              if (res.data.data.code == 502) {
                this.SmsForm.phoneErrormsg = res.data.data.message;
                this.$confirm(res.data.data.message, "", {
                  confirmButtonText: "前往注册",
                  cancelButtonText: "取消",
                  type: "warning",
                })
                  .then(() => {
                    this.$router.push("/register");
                  })
                  .catch(() => {});
              }
              reject(res.data.data);
            }
          })
          .catch((err) => {
            this.$message.error("出错了哦");
            reject(err);
          });
      });
    },
    sendsms() {
      this.$refs.SmsForm.validate(async (valid) => {
        if (!valid) return false;
        else {
          let userSmscode = {
            phone: this.SmsForm.phone,
            nowtime: Date.now(),
            smscode: this.SmsForm.smscode,
          };
          this.axios
            .post("/user/IdentifySmscode", userSmscode)
            .then((res) => {
              console.log(res);
              if (res.data.data.code == 200) {
                this.$store.commit("setSmsContion", {
                  key: "forget",
                  value: true,
                });
              } else if (res.data.data.code == 500) {
                this.SmsForm.smscodeErrormsg = "错误的验证码";
              } else if (res.data.data.code == 501) {
                this.SmsForm.smscodeErrormsg = "验证码已过期";
              } else if (res.data.data.code == 502) {
                this.SmsForm.smscodeErrormsg = "未知的错误";
              }
            })
            .catch((err) => {
              console.log(err);
              this.$message.error("出错了哦");
              return false;
            });
        }
      });
    },
  },
  mounted() {
    this.signal = this.sign;
  },
};
</script>

<style scoped>
.smsbox {
  width: 350px;
  height: 48px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.uInfo-input-right {
  position: absolute;
  line-height: 48px;
  height: 100%;
  right: 31px;
  top: 2px;
  z-index: 999;
}

.uInfo-get-code {
  border: none;
  cursor: pointer;
  background-color: transparent;
  display: inline-block;
  height: 20px;
  color: #007dff;
  font-size: 14px;
}
</style>
<style >
.smsbox .el-input__inner {
  background-color: #f2f2f2;
  border-radius: 20px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606466;
  font-size: inherit;
  height: 56px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
</style>